昨天有提到
https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics
不知道各位看得如何
一個正常的html網頁
會有包含以下三部分
<!doctype HTML>
放在網頁的最上面，告知網頁使用的html標籤是甚麼版本
``
這個你隨便看開一個瀏覽器
假設是chrome
再按F12
再切到Elements 的那頁
會看到這個
就是我們的HTML架構
正常開始入門時
還會看到這個架構，這個頁面
之後進入框架和打包的世界後，這塊就是給管家管了
不過我們才剛開始
所以先一步一步來
通常會在head的地方掛連結
head的部分還會放一些常見的子元素
如：
title：這邊打的文字會出現在瀏覽器該分頁的標題上
meta：HTML文件資訊，裡面也會放關於文字的編碼，像是 < meta charset="UTF-8" />代表用UTF-8的格式編碼
<head>
<meta charset="UTF-8" />
<title>我是這網頁的標題</title>
<style>裡面寫CSS<style>
<script>這邊寫JavaScript，但是現在通常都不放在head裡面了</script>
</head>
body的地方寫網頁內容
最後的script再寫JavaScript
就是一個可以運作的極簡易網頁架構
再來我們介紹常用的HTML標籤
架構標籤
<nav>導覽列</nav>
<header>通常放網頁標題</header>
<article>放文章</article>
<footer>
網頁最底下的那塊區塊，常常寫說版權所有翻版必究之類的話</footer>
區塊標籤
<div>區塊標籤，我們常常用這元素來包東西，
以及快速的輸入方式emmet輸入方式為 . 這樣就可以打出這個了</div>
文字相關標籤
<h1>超大標題</h1>
<h2>比超大標題小一點的標題</h2>
<h3>比超大標題小一點再小一點的標題</h3>
<h4>標題</h4>
<h5>小標題</h5>
<h6>小小標題</h6>
<p>一行文字</p>
<b>一行粗體字</b>
<span>行內元素</span>
<br>換行</br>
表單相關標籤
<form></form>
<input>這是一個輸入框</input>
<button>這是一個按鈕</button>
<ul>
<li>這是一個項目列表1</li>
<li>這是一個項目列表2</li>
<li>這是一個項目列表3</li>
...
</ul>
<ol>
<li>這是一個序號列表1</li>
<li>這是一個序號列表2</li>
<li>這是一個序號列表3</li>
...
</ol>
<img src="我是連結的來源">
這個會帶出圖片
input標籤可以帶type屬性
屬性中常用的類別有number、email、data、time、tel
這些類別可以讓使用者在手機版本輸入時
會變成不同的輸入鍵盤介面
算是一種友善的使用者體驗吧
<input type="number">這是一個輸入框</input>
剩下的我們明天繼續說
iThome鐵人賽
看影片追技術